<template>
  <div class="dashboard-container">
    <el-row :gutter="32">
      <el-col :span="6">
        <Card title="固定资产" :total="assetTotal" clazz="purple" />
      </el-col>
      <el-col :span="6">
        <Card title="仓库数量" :total="storehouseTotal" clazz="green" />
      </el-col>
      <el-col :span="6">
        <Card title="在用设备" :total="usedAssetTotal" clazz="orange" />
      </el-col>
      <el-col :span="6">
        <Card title="总价值" :total="assetMoney" clazz="darkgreen" unit="元" />
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetChart :key="assetStatsByBigTypeChartKey" title="资产预览" :data="assetStatsByBigTypeChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByBigTypeDataFormated" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="分类">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click.native.prevent="viewMiddleAssetChart(scope.row)">
                    {{ scope.row.name }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
              <el-table-column prop="amount" header-align="center" align="center" label="金额（元）" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetOgChart :key="assetStatsByOgChartKey" title="部门在用数量" :data="assetStatsByOgChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByOgTableData" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="部门" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetStatusChart :key="assetStatsByStatusChartKey" title="资产状态" :data="assetStatsByStatusChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByStatusTableData" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="状态" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <StorehouseChart :key="assetStatsByStorehouseChartKey" title="仓库分类剩余" :data="assetStatsByStorehouseChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByStorehouseTableData" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="分类" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <ViewDialog :title="currentBigTypeName" :append-to-body="true" :show="middleTypeChartDialogVisible" @on-cancel="middleTypeChartDialogVisible = false">
      <div :style="{'height': '400px' }">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetChart v-if="middleTypeChartDialogVisible" :key="assetStatsByMiddleTypeChartKey" title="资产预览" :data="assetStatsByMiddleTypeChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByMiddleTypeDataFormated" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="分类" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
              <el-table-column prop="amount" header-align="center" align="center" label="金额（元）" />
            </el-table>
          </div>
        </el-card>
      </div>
    </ViewDialog>
  </div>
</template>

<script>
import Card from './components/Card.vue'
// import BarChart from '@neu/biz-core/components/Charts/BarChart'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { assetTotalStats, assetMoneyStats, statsByBigType, statsByOg, statsByStatus, statsByStorehouse, statsByMiddleType } from '@neu/dcam-ui/api/fixedAsset'
import { totalStats as storehouseTotalStats } from '@neu/dcam-ui/api/storehouse'
import AssetChart from './components/AssetChart.vue'
import AssetOgChart from './components/AssetOgChart.vue'
import AssetStatusChart from './components/AssetStatusChart.vue'
import StorehouseChart from './components/StorehouseChart.vue'
import ViewDialog from '@neu/biz-core/components/ViewDialog'

export default {
  name: 'Dashboard',
  components: {
    Card,
    AssetChart,
    AssetOgChart,
    AssetStatusChart,
    StorehouseChart,
    ViewDialog
  },
  mixins: [belongs],
  data() {
    return {
      assetTotal: 0,
      storehouseTotal: 0,
      usedAssetTotal: 0,
      assetMoney: 0,
      assetStatsByBigTypeChartKey: 'statsByType' + Date.now(),
      assetStatsByBigTypeChartData: [],
      assetStatsByBigTypeTableData: [],
      assetStatsByOgChartKey: 'statsByOg' + Date.now(),
      assetStatsByOgChartData: [],
      assetStatsByOgTableData: [],
      assetStatsByStatusChartKey: 'statsByStatus' + Date.now(),
      assetStatsByStatusChartData: [],
      assetStatsByStatusTableData: [],
      assetStatsByStorehouseChartKey: 'statsByStorehouse' + Date.now(),
      assetStatsByStorehouseChartData: [],
      assetStatsByStorehouseTableData: [],
      middleTypeChartDialogVisible: false,
      currentBigTypeName: '',
      assetStatsByMiddleTypeChartKey: 'statsByMiddleType' + Date.now(),
      assetStatsByMiddleTypeChartData: [],
      assetStatsByMiddleTypeTableData: []
    }
  },
  computed: {
    assetStatsByBigTypeDataFormated: function() {
      return this.assetStatsByBigTypeTableData.map(it => {
        it.amount = Number(it.amount).toFixed(2)
        return it
      })
    },
    assetStatsByMiddleTypeDataFormated: function() {
      return this.assetStatsByMiddleTypeTableData.map(it => {
        it.amount = Number(it.amount).toFixed(2)
        return it
      })
    }
  },
  created() {
    this.getAssetsTotal()
    this.getUsedAssetsTotal()
    this.getStorehouseTotal()
    this.getAssetMoney()
    this.getStatsByAssetType()
    this.getStatsByOg()
    this.getStatsByStatus()
    this.getStatsByStorehouse()
  },
  methods: {
    // 资产数量
    getAssetsTotal() {
      const params = {
        s_belongs: this.belongs,
        s_categoriesArr: this.categories
      }
      assetTotalStats(params).then(res => {
        this.assetTotal = res.data ? res.data : 0
      })
    },
    // 在用设备数量
    getUsedAssetsTotal() {
      const params = {
        s_belongs: this.belongs,
        s_categoriesArr: this.categories,
        s_status: 'used'
      }
      assetTotalStats(params).then(res => {
        this.usedAssetTotal = res.data ? res.data : 0
      })
    },
    // 仓库数量
    getStorehouseTotal() {
      storehouseTotalStats(this.belongs).then(res => {
        this.storehouseTotal = res.data ? res.data : 0
      })
    },
    // 总价值
    getAssetMoney() {
      const params = {
        s_belongs: this.belongs,
        s_categories: this.categories
      }
      assetMoneyStats(params).then(res => {
        this.assetMoney = (res.data ? res.data : 0)
      })
    },
    // 资产分类统计
    getStatsByAssetType() {
      statsByBigType(this.belongs).then(response => {
        const data = response.data
        this.assetStatsByBigTypeTableData = data
        this.assetStatsByBigTypeChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByBigTypeChartKey = 'statsByType' + Date.now()
      })
    },
    // 按部门统计资产
    getStatsByOg() {
      statsByOg(this.belongs).then(response => {
        const data = response.data.slice(0, 100)
        this.assetStatsByOgTableData = data
        this.assetStatsByOgChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByOgChartKey = 'statsByOg' + Date.now()
      })
    },
    // 按状态统计资产
    getStatsByStatus() {
      statsByStatus(this.belongs).then(response => {
        const data = response.data.slice(0, 100)
        this.assetStatsByStatusTableData = data
        this.assetStatsByStatusChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByStatusChartKey = 'statsByStatus' + Date.now()
      })
    },
    // 仓库分类剩余统计
    getStatsByStorehouse() {
      statsByStorehouse(this.belongs).then(response => {
        const data = response.data
        this.assetStatsByStorehouseTableData = data
        this.assetStatsByStorehouseChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByStorehouseChartKey = 'statsByStorehouse' + Date.now()
      })
    },
    viewMiddleAssetChart(row) {
      this.currentBigTypeName = row.name
      statsByMiddleType(this.belongs, { bigTypeName: row.name }).then(response => {
        this.assetStatsByMiddleTypeTableData = response.data
        this.assetStatsByMiddleTypeChartData = response.data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByMiddleTypeChartKey = 'statsByMiddleType' + Date.now()
        this.middleTypeChartDialogVisible = true
      })
    }
  }
}
</script>

<style lang="scss">
  .mixed {
    .el-card__body {
      display: flex;
      flex-direction: row;
    }
  }
</style>
